<ion-header>
  <ion-navbar>
    <ion-title>编辑个人信息</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <form (ngSubmit)="formSubmit()" #ngForm="ngForm" class="myForm">
    <ion-list>

      <ion-item>
        <ion-label required>手机号码</ion-label>
        <ion-input type="number" name="mobileNumber" placeholder="请输入用户名（必填）" [(ngModel)]="userInfo.mobileNumber"
                   #mobileNumber="ngModel"
                   required validator-regular="phone"></ion-input>
      </ion-item>
      <div *ngIf="mobileNumber.invalid" class="form-invalid-tip">
        <div *ngIf="mobileNumber.errors.required">手机号码是必填项</div>
        <div *ngIf="mobileNumber.errors.phone">手机号码不合法</div>
      </div>

      <ion-item>
        <ion-label required>真实姓名</ion-label>
        <ion-input type="text" name="realname" placeholder="请输入真实姓名（必填）" [(ngModel)]="userInfo.realname"
                   #realname="ngModel" required minlength="2" maxlength="4" validator-regular="chinese"></ion-input>
      </ion-item>
      <div *ngIf="realname.invalid" class="form-invalid-tip">
        <div *ngIf="realname.errors.required">姓名是必填项</div>
        <div *ngIf="realname.errors.minlength">姓名至少2位字符</div>
        <div *ngIf="realname.errors.chinese">姓名必须是中文字符</div>
      </div>

      <ion-item>
        <ion-label>电子邮箱</ion-label>
        <ion-input type="email" name="email" placeholder="请输入邮箱地址" [(ngModel)]="userInfo.email"
                   #email="ngModel" validator-regular="email"></ion-input>
      </ion-item>
      <div *ngIf="email.invalid" class="form-invalid-tip">
        <div *ngIf="email.errors.email">邮箱地址输入不合法</div>
      </div>

    </ion-list>
    <div margin-horizontal>
      <button type="submit" ion-button block [disabled]="!ngForm.form.valid">保 存</button>
    </div>
  </form>

</ion-content>
